<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link href="../../../css/style.css" rel="stylesheet" type="text/css" />
		<link href="../../../css/mui.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="../../../src/iconfont/iconfont.css">
		<style>
			.takeaddress {
				width: 93%;
				margin: 0 auto;
				font-size: 14px;
			}
			
			.addressimg img {
				width: 100%;
			}
			
			#confirmshop {
				background: #fff;
			}
			
			.takeaddress {
				padding: 0.2rem 0;
			}
			
			.asd {
				margin-top: 0.2rem;
				margin-right: 0.2rem;
			}
			
			.confirmcontent .title {
				padding: 0 0.35rem;
				height: 40px;
				line-height: 40px;
			}
			
			.shopinfobox {
				background: #f6f6f6;
				padding: 0.2rem 0.35rem;
			}
			
			.shopinfobox img {
				width: 30%;
				height: 2rem;
				margin-right: 0.2rem;
			}
			
			.shopcontenttitle {
				width: 65%;
				font-size: 14px;
				position: relative;
				height: 2rem;
			}
			
			.jifenposition {
				position: absolute;
				bottom: 0;
				width: 100%;
			}
			
			.needjifenleft {
				color: #e5425c;
			}
			
			.buyboxstyle {
				background: #fff;
				font-size: 14px;
			}
			
			.buybox {
				margin: 0 0.35rem;
				height: 1rem;
				line-height: 1rem;
				border-bottom: solid 1px #f1f1f1;
			}
			
			.distribution {
				padding: 0 0.35rem;
				border-bottom: solid 1px #f1f1f1;
				height: 1rem;
				line-height: 1rem;
			}
			
			.allcount {
				background: #fff;
				height: 1rem;
				line-height: 1rem;
				text-align: right;
				padding-right: 0.35rem;
			}
			
			.redcolor {
				color: #df0024;
			}
			
			.adressbox {
				position: relative;
			}
			
			.revisebtn {
				position: absolute;
				right: -0.8rem;
				bottom: 0.15rem;
			}
			
			.submitbtn {
				position: fixed;
				background: #fff;
				width: 100%;
				bottom: 0;
				height: 40px;
				line-height: 40px;
				text-align: right;
			}
			
			.submitbtna {
				background: #e10052;
				display: block;
				width: 30%;
				float: right;
				text-align: center;
				color: #fff;
				font-size: 14px;
			}
			.selectType{
				border: solid 1px #DFDFDF;
				width: 100px;
				text-align: center;
				position:relative;  
				bottom: 0;
				left: 15px;
				font-size: 14px;
			}
			.selectType ul{
				
			}
			#select {
				display: block;
			    width:30%;
			    margin-left: 15px;
			    height: 30px;
			    line-height: 30px;
			    border-radius: 100px;
			    background-color: #ffffff;
			    border: solid 1px #DFDFDF;
			    text-align: center!important;
			    position: relative;
			    color: #7b7b7b;
			    font-size: 13px;
			    padding-left:0 ;
			}
			.select-head .select-head-cont {
				
			} 
			
			.select-head .select-icon {
				
				
				color: #7b7b7b;
				font-size: 10px;
				position: absolute;
				right: 5px;
			}
			
			.select-head .select-icon img {
				width: 0.25rem;
			}
			.option {
				color: #7B7B7B;
				background: #fff;
				display: none;
				position: relative;
				text-align:center;
				z-index: 9;
				font-size: 13px;
				
				width: 100%;
				padding-left:0 ;
			}
			
			.option-item:hover {
				background: rgba(204, 106, 67, 0.3);
			}
			
			.option-item {
				line-height: 30px;
				border-bottom: solid 1px #f1f1f1;
			}
			.option{
				border: solid 1px #f1f1f1;
				border-bottom: none;
				margin-top: -1px;
			}
			
		</style>
	</head>

	<body>
		<div id="confirmshop"> 
			<div class="takeaddress">
				<div class="fl asd">
					<font class="mui-icon mui-icon-location"></font>
				</div>
				<div class="adressbox fl" style="width: 80%;" @tap="chooseaddress()">
					<div class="takename fl">收货人:{{address.receive_name}}</div>
					<div class="taketel fr">{{address.receive_phone}}</div>
					<div class="clear"></div>
					<div class="addresscontent  fl">收货地址：{{address.receive_address}}</div>
					<font class="mui-icon mui-icon-arrowright revisebtn"></font>
				</div>
			</div>
			<div class="addressimg"><img src="../../../images/addressimg.jpg" /></div>
			<div class="confirmcontent">
				<div class="title">童伴</div>
				<div class="shopinfobox">
					<img class="fl" :src="info.PIC" />
					<div class="shopcontenttitle fl">
						<div class="shoptitle">{{info.NAME}}</div>
						<div class="jifenposition">
							<span class="needjifenleft">{{info.POINT}}积分</span>
							<span class="fr" id="confirmcount">x1</span>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
				<div class="buyboxstyle">
					<div class="buybox">
						<span>购买数量</span>
						<div class="fr">
							<span class="leftbtn" id="leftbtn"><font class="mui-icon mui-icon-minus"></font></span>
							<span class="buycount" id="buycount">1</span>
							<span class="rightbtn" id="rightbtn"><font class="mui-icon mui-icon-plus"></font></span>
						</div>
					</div>
					<div class="distribution">
						<span>配送方式</span>
						<span class="mui-pull-right">快递 免邮</span>
						<div class="clear"></div>
					</div>
					<div class="allcount">
						共<span id="allshang"></span>件商品 小计：<span class="redcolor" id="alljifen"></span><span class="redcolor">积分</span>
					</div>
				</div>

			</div>
			<div class="mui-card">
                            <!-- <span class="paytitle">请选择支付方式</span> -->
                            <form class="mui-input-group" id="anzhuoBox">
                                <div class="mui-input-row mui-radio" id="alipay">
                                    <label style="line-height: inherit;">
										个人积分
										<input name="androidpay" type="radio" id="radio1" checked="checked" data-channel='alipay' />
									</label>
                                </div>
                                <div class="mui-input-row mui-radio" id="wxpay">
                                    <label style="line-height: inherit;">
										家庭组积分
										<input name="androidpay" type="radio" id="radio2" data-channel='wxpay'/>
									</label>
                                </div>
                            </form>
                            <!--form class="mui-input-group" id="applebox"> 
									<div class="mui-input-row mui-radio" id="apple">
										<label>苹果内购支付</label>
										<input name="applepay" type="radio" id="apple" checked="checked" />
									</div>
								</form-->
                        </div>
			<!--<div id="usertype">
						<ul id="select">
							<li>
								<div class="select-head">
									<span class="select-head-cont" id="usertypes"></span>
									<span class="select-icon iconfont icon-triangledownfill"></span>
									<div class="clear"></div>
								</div>
								<ul class="option">
									<li class="option-item">个人积分</li>
									<li class="option-item">家庭组积分</li>
									
								</ul>

							</li>
						</ul>
					</div>-->
			<div class="submitbtn">
				
				<span class="submitbtna" @tap='submitd()'>提交订单</span>
				
			</div>
			
		</div>
		<script src="../../../js/jquery-1.11.3.js"></script>
		<script src="../../../js/mui.js"></script>
		<script src="../../../js/app.js"></script>
		<script src="../../../js/vue.min.js"></script>

		<script src="../../../js/token.js"></script>
		<script>
			var state = '';
			var uid = '';
			var memberToken = '';
			var needjifen = '';
			var alljifen = '';
			var kucun = '';
			var addressid = '';
			var valuea = '';
			var selectType=0;
			mui.plusReady(function() {
				
				state = app.getState();
				uid = state.userid;
				memberToken = state.memberToken;
				childid = state.childid
				var self = plus.webview.currentWebview();
				shopid = self.shopid;
				count = self.count;
				document.getElementById('confirmcount').innerHTML = 'x' + count;
				document.getElementById('buycount').innerHTML = count;
				mui.post(Apiurl+'index/member_info', {
					uid: uid,
					memberToken: memberToken,
				}, function(data) {
					//confirmshop.childid=data.child[0].child_id
				}, 'json');
				mui.post(Apiurl+'shop/addresslist', {
					uid: uid,
					memberToken: memberToken,
					value: 1
				}, function(data) {
					if(data.status == 201) {

					} else {

						confirmshop.address = data.list
						addressid = data.list.id;

					}
				}, 'json');
				mui.post(Apiurl+'shop/info', {
					uid: uid,
					memberToken: memberToken,
					id: shopid
				}, function(data) {
					console.log(JSON.stringify(data))
					confirmshop.info = data;
					needjifen = data.POINT;
					alljifen = data.sum;
					kucun = data.COUNT;
					document.getElementById('alljifen').innerHTML = count * needjifen;
					document.getElementById('allshang').innerHTML = count;
				}, 'json');

				document.getElementById('leftbtn').addEventListener('tap', function() {

					if(document.getElementById('buycount').innerHTML <= 1) {
						plus.nativeUI.toast('最少选择一件', {
							verticalAlign: 'middle'
						});
					} else {
						document.getElementById('buycount').innerHTML--
							document.getElementById('confirmcount').innerHTML = 'x' + document.getElementById('buycount').innerHTML;
						document.getElementById('allshang').innerHTML = document.getElementById('buycount').innerHTML;
						document.getElementById('alljifen').innerHTML = document.getElementById('buycount').innerHTML * needjifen
					}

				})
				document.getElementById('rightbtn').addEventListener('tap', function() {

					if(needjifen * document.getElementById('buycount').innerHTML >= alljifen) {
						plus.nativeUI.toast('您的积分不足', {
							verticalAlign: 'middle'
						});
					} else if(document.getElementById('buycount').innerHTML >= kucun) {
						plus.nativeUI.toast('库存不足', {
							verticalAlign: 'middle'
						});
					} else {
						document.getElementById('buycount').innerHTML++
							document.getElementById('confirmcount').innerHTML = 'x' + document.getElementById('buycount').innerHTML;
						document.getElementById('allshang').innerHTML = document.getElementById('buycount').innerHTML;
						document.getElementById('alljifen').innerHTML = document.getElementById('buycount').innerHTML * needjifen
					}

				})
			});

			var confirmshop = new Vue({
				el: '#confirmshop',
				data: {
					address: [],
					info: [],
					childid:''
				},
				methods: {
					chooseaddress: function() {
						mui.openWindowWithTitle({
							url: 'takeaddress.html',
							id: 'takeaddress',
							preload: true,
							show: {
								aniShow: 'pop-in',
								autoShow: true
							},

							waiting: {
								autoShow: true
							}
						});
					},
					submitd: function() {
						if(!addressid) {
							plus.nativeUI.toast('请选择您的收货地址');
						} else {
							if($('#radio1').prop("checked")){
								mui.post(Apiurl+'shop/add', {
								uid: uid,
								memberToken: memberToken,
								id: shopid,
								NUM: document.getElementById('buycount').innerHTML,
								TOTAL: document.getElementById('buycount').innerHTML * needjifen,
								address: addressid,
							}, function(data) {
								if(data.status == 200) {
									mui.fire(plus.webview.getWebviewById("pcenter"), "refreshpoint", {});
									plus.nativeUI.toast('兑换成功');
									mui.openWindow({
										url: 'orderlist.html',
										id: 'orderlist',
										styles: {
											"render": "always",
											"popGesture": "hide",
											"bounce": "vertical",
											"bounceBackground": "#efeff4",
											"titleNView": { //详情页原生导航配置
												backgroundColor: '#fff', //导航栏背景色
												titleText: '订单列表', //导航栏标题
												titleColor: '#000', //文字颜色
												autoBackButton: true, //自动绘制返回箭头
												splitLine: { //底部分割线
													color: '#dfdfdf'
												}
											}
										},
										createNew: true,
									});
								} else if(data.status == 201) {
									plus.nativeUI.toast('兑换失败');
								}else if(data.status == 405){
									plus.nativeUI.toast('库存不足');
								}
							}, 'json')
							}else if($('#radio2').prop("checked")){
								mui.post(Apiurl+'shop/add', {
								uid: uid,
								memberToken: memberToken,
								id: shopid,
								NUM: document.getElementById('buycount').innerHTML,
								TOTAL: document.getElementById('buycount').innerHTML * needjifen,
								address: addressid,
								child_id:childid
							}, function(data) {
								if(data.status == 200) {
									mui.fire(plus.webview.getWebviewById("pcenter"), "refreshpoint", {});
									plus.nativeUI.toast('兑换成功');
									mui.openWindow({
										url: 'orderlist.html',
										id: 'orderlist',
										styles: {
											"render": "always",
											"popGesture": "hide",
											"bounce": "vertical",
											"bounceBackground": "#efeff4",
											"titleNView": { //详情页原生导航配置
												backgroundColor: '#fff', //导航栏背景色
												titleText: '订单列表', //导航栏标题
												titleColor: '#000', //文字颜色
												autoBackButton: true, //自动绘制返回箭头
												splitLine: { //底部分割线
													color: '#dfdfdf'
												}
											}
										},
										createNew: true,
									});
								} else if(data.status == 201) { 
									plus.nativeUI.toast(data.errmsg);
								}else if(data.status == 405){ 
									plus.nativeUI.toast(data.errmsg);
								}else if(data.status == 404){  
									plus.nativeUI.toast(data.errmsg);
								}else if(data.status == 406){ 
									plus.nativeUI.toast(data.errmsg);
								} else if(data.status == 202){ 
									plus.nativeUI.toast(data.errmsg);
								}else if(data.status == 203){  
									plus.nativeUI.toast(data.errmsg);
								}
							}, 'json')
							}
							
						}

					}
				}
			})
			var backButtonPress = 0;
			mui.back = function(event) {
				var ws = plus.webview.currentWebview()
				if(ws) {
					ws.close();
				} else {
					backButtonPress++;
					if(backButtonPress > 1) {
						plus.runtime.quit();
					} else {
						plus.nativeUI.toast('再按一次退出应用');
					}
					setTimeout(function() {
						backButtonPress = 0;
					}, 1000);
					return false;
				}
			};
			window.addEventListener('refreshaddress', function(event) {
				if(event.detail.del) {
					mui.post(Apiurl+'shop/addresslist', {
						uid: uid,
						memberToken: memberToken,
						value: 1
					}, function(data) {
						if(data.status == 201) {
							confirmshop.address = '';
							addressid = ''
						} else {
							confirmshop.address = data.list;
							addressid = data.list.id;
						}

					}, 'json');
				} else {
					mui.post(Apiurl+'shop/addresslist', {
						uid: uid,
						memberToken: memberToken,
						value: 1
					}, function(data) {

						confirmshop.address = data.list
						addressid = data.list.id;
					}, 'json');
				}

			});
			
		</script>
	</body>

</html>